<template>
  <div class="box">
    <el-form :model="form" style="margin-top: 1em" ref="formRuleRef" :rules="formRule">
      <el-form-item :label="'姓&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp名'" prop="name">
        <el-input  v-model="form.name" maxlength="30" show-word-limit></el-input>
      </el-form-item>
      <el-form-item label="手&nbsp机&nbsp号" prop="phone">
        <el-input v-model="form.phone" maxlength="20" show-word-limit></el-input>
      </el-form-item>
      <el-form-item :label="'邮&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp箱'" prop="email">
        <el-input  v-model="form.email" maxlength="50" show-word-limit></el-input>
      </el-form-item>
      <el-form-item :label="'密&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp码'" prop="password">
        <el-input  v-model="form.password" maxlength="20" show-word-limit show-password></el-input>
      </el-form-item>
      <el-form-item :label="'确认密码'" prop="rePassword">
        <el-input  v-model="form.rePassword" maxlength="20" show-word-limit show-password></el-input>
      </el-form-item>
    </el-form>
    <div class="bottom_options">
      <el-button type="primary" class="btn_login" @click="clickRegister(formRuleRef)">注册
      </el-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref} from "vue";
import {UserRequest} from "../../request/MyRequset"
import {FormInstance, FormRules} from "element-plus";

const form = reactive({
  name: "",
  phone: "",
  password: "",
  rePassword: "",
  email: "",
})
let formRuleRef = ref<FormInstance>()
let formRule = reactive<FormRules>({
  name: [
    {required: true, message: "不能为空"},
  ],
  phone: [
    {required: true, message: "不能为空"},
  ],
  password: [
    {required: true, message: "不能为空"},
  ],
  rePassword: [
    {required: true, message: "不能为空"},
    {
      asyncValidator: (rule, value) => {
        return new Promise((resolve, reject) => {
          if (value !== form.password) {
            reject("两次输入的密码不一致")
          } else {
            resolve();
          }
        })
      }
    }
  ],
  email: [
    {required: true, message: "不能为空"},
    {
      asyncValidator: (rule, value) => {
        return new Promise((resolve, reject) => {
          if (!value.includes("@")) {
            reject("邮箱格式错误")
          } else {
            resolve();
          }
        })
      }
    }
  ],
})
const emit = defineEmits(["dialog","changeLoginType"])

const clickRegister = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate(async (valid) => {
    if (!valid) return;
    let res: any = await UserRequest.userRegister(form.name, form.phone, form.password, form.email, -1);
    if (res.data.suc) {
      //将false通过changeLoginType传给父组件
      emit("dialog", {
        show: true,
        msg: "注册成功，即将跳转登录！",
        func: () => {
          emit("changeLoginType", false);
        },
      });
    } else {
      emit("dialog", {
        show: true,
        msg: "注册失败，请检查！",
        func: () => {
          console.log("注册失败");
        },
      });
    }
  })

}
</script>

<style scoped lang="scss">
.box {
  max-width: 30vw;
  width: 25vw;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

  .login_input {
    width: 50%;
  }

  .margin_top {
    margin-top: 1em;
  }


  .bottom_options {
    margin-top: 1em;
    width: 50%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    .btn_login {
      margin: 0;
      width: 40%;
      flex-grow: 1;
    }

    .btn_find_password {
      margin: 0;
      flex-grow: 1;
    }
  }
}
</style>
